<template>
	<view>
		<button @click="open">openConfig</button>
		<uni-popup ref="popup" type="center">
			<view class="content">
				<view class="content-title">设置接受的通知类型</view>
				<form @submit="onSubmit">  
					<view class="list">
						<view class="item">
							<image class="icon" src="@/uni_modules/uni-notification-center/static/email.png" mode="widthFix"></image>
							<text class="title">电子邮箱通知</text>
							<switch name="email" class="switch" color="#1ba034"
								:checked="config.email" />
						</view>
						<view class="item">
							<image class="icon" src="@/uni_modules/uni-notification-center/static/notice.png" mode="widthFix"></image>
							<text class="title">应用通知中心</text>
							<switch name="notification_center" class="switch" color="#1ba034"
								:checked="config.notification_center" />
						</view>
						<view class="item">
							<image class="icon" src="@/uni_modules/uni-notification-center/static/wechat.png" mode="widthFix"></image>
							<text class="title">微信公众号消息</text>
							<switch name="weixin_official_accounts" class="switch" color="#1ba034"
								:checked="config.weixin_official_accounts" />
						</view>
					</view>
					<view class="button-box">
						<button class="btn cancel" @click="close">取消</button>
						<button form-type="submit" class="btn confirm" >确认</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				config: {
					email: true,
					notification_center: true,
					weixin_official_accounts: true
				}
			}
		},
		async mounted() {
			let res = await db.collection('uni-notification-config')
				.where('"user_id" == $cloudEnv_uid')
				.get()
			console.log(res);
			this.config = res.result.data[0]
			delete this.config._id
			// this.$refs.popup.open()
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			async onSubmit(e){
				this.config = e.detail.value
				uni.showLoading({
					title: '更新中',
					mask: true
				});
				let res = await db.collection('uni-notification-config')
					.where('"user_id" == $cloudEnv_uid')
					.update(this.config)
				uni.hideLoading()
				uni.showToast({
					title: res.result.errCode ? res.result.errMsg : '更新成功',
					icon: 'none'
				});
				this.close()
				
			}
		}
	}
</script>

<style>
	.content {
		background-color: #FFF;
		width: 550rpx;
		border-radius: 10px;
	}

	.content-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding-top: 15px;
		padding-bottom: 10px;
		font-size: 16px;
		font-weight: 500;
		flex: 1;
		justify-content: center;
	}

	.title {
		flex: 1;
	}

	.list {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		background-color: #FFF;
		padding: 0 10px 10px 10px;
	}

	/* @media screen and (min-width: 500px) {
		.list {
			flex-direction: row;
		}
	} */

	.item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 5px;
		justify-content: center;
		align-items: center;
	}

	.icon {
		width: 25px;
		margin-right: 16rpx;
	}

	.title {
		font-size: 14px;
	}

	.switch {
		transform: scale(0.65);
	}

	.button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
	}

	.btn {
		flex: 1;
		text-align: center;
		height: 45px;
		line-height: 45px;
		border-top: solid 1px #eee;
		font-size: 16px;
		background-color: #FFF;
	}
	/* #ifdef H5 */
	.btn::after{
		display: none;
	}
	/* #endif */

	.cancel {
		border-radius: 0 0 0 10px;
		border-right: solid 1px #eee;
	}

	.confirm {
		border-radius: 0 0 10px 0;
		color: #007aff;
	}
</style>
